<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
   <title>项目管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="layui-form layuimini-form"    lay-filter="example" >
        <div class="layui-tab">
            <ul class="layui-tab-title">
              <li class="layui-this">内容设置</li>
              <li>连载设置</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label required">主标题</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="course_id" id="course_id" value="">
                        <input type="hidden" name="id" id="id" value="">
                        <input type="text" name="name" id="name" lay-verify="title" lay-reqtext="主标题" placeholder="主标题" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">内容</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea " name="chapter_detail" id="chapter_detail"rows="20"  ></textarea>
                    </div>
                </div>
                <!-- <div class="layui-form-item" id="video_div">
                    <div class="layui-inline">
                        <label class="layui-form-label">上传课程</label>
                        <button type="button" class="layui-btn layui-btn-primary" id="uploadVideoBtn">
                            <i class="icon icon-upload3"></i>点击上传</button>
                        <input type="file" style="display:none;" id="uploadVideo"
                            onchange="uploadVideoFiles()"/>
                        <input type="hidden" name="chapter_file" id="video_path">
                        <div style="margin-top: 10px;margin-left: 110px;">
                            <video  id="video_p"  width="400" height="300" controls  autoplay="autoplay">
                                <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div> -->
              </div>
              <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label required">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="上架"  checked="">
                        <input type="radio" name="type" value="2" title="待审核"> 
                        <input type="radio" name="type" value="3" title="审核拒绝" >
                        <input type="radio" name="type" value="4" title="下架"> 
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">连载状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="lz_status" value="1" title="开启"  checked="">
                        <input type="radio" name="lz_status" value="2" title="关闭"> 
                    </div>
                </div>
                <div  class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" id="sort" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">href</label>
                    <div class="layui-input-block">
                        <input type="text" name="href" id="href"  autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
              </div>
            </div>
        </div>
    </div>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js" charset="utf-8"></script>
<script>
      var client = new OSS.Wrapper({
            region: "oss-cn-zhangjiakou", //阿里云获取
            accessKeyId: "LTAI4FcBCbpzbeDdnohUFGPN",
            accessKeySecret: "n1TwP9getLfoYoQb9bWiGzbuXQtLWN",
            bucket: "248img",  //要存储的目录名
            secure:true,
        });
        
    layui.use(['form','upload','http','tableSelect'], function () {
        var form = layui.form,
            layer = layui.layer,
            uploadInst = layui.upload,
            wangEditor = layui.wangEditor,
            $ = layui.$,
            tableSelect = layui.tableSelect,
            http  = layui.http,
            apiurl =http.api;

        var course_id  = http.getQueryString('course_id');
        var id  = http.getQueryString('id');
        if(id){
            getInfo();
        }
        console.error("course_id",course_id);
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            if(!data.field.course_id){
                data.field.course_id = course_id;
            }
            http.httpajax("Business/upAdSunEssay", data.field,"POST",function(res) {
                if(res.code === '0000'){
                    layer.msg(res.msg,{time:1000,icon:1},function(){
                        // 关闭弹出层
                        layer.close();
                        window.parent.location.reload();//刷新父页面
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    });
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            });
        });

        $("#uploadVideoBtn").click(function () {
        // $("#uploadFile").click();
            document.getElementById("uploadVideo").click();
         });
   
         
        uploadInst.render({

            elem: '#cateBtnMp4',

            url: '{:url("OSS/upload")}',

            accept:"video",


            before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。

                vv = layer.load(1, {shade: [0.1,'#fff']});

            },

            done: function(res){

                if(res){

                    layer.close(vv);

                    $('#video_p').remove();

                    $('#video_path').val(res);

                    let html = `<video id="video_p" style="margin: 0 0 0 50px;" width="300" height="200" controls  ><source src="` + res + `" type="video/mp4"></video>`;

                    $('#video_div').after(html);
                    layer.msg("上传成功",{offset:['200px','450px'],icon:6});
                }else{

                    //如果上传失败

                    return layer.msg('上传失败');

                }

            },

            error: function(){

                return layer.msg('上传失败');

            }

        });

        function getInfo(){
            http.httpajax("Business/getSunEssayList",{"id":id},"POST",function(res) {
                if(res.code === '0000'){
                    form.val('example', res.data);
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                } 
            });
        }
    });
    
          
    function uploadVideoFiles() {
        var file = document.getElementById("uploadVideo").files[0];
        var val = document.getElementById("uploadVideo").value;
        // 取出文件后缀名
        var randomString = this.randomString();
        var suffix = val.substr(val.indexOf("."));
        var obj = timestamp();
        // var storeAs = 'upload-file/' + "/" + obj + suffix;
        var storeAs = obj + randomString + suffix;
        var loading =layer.load(1, {shade: [0.1,'#fff']});

        console.log("loading",loading)
        console.log("storeAs",storeAs)
        client.multipartUpload(storeAs, file).then(function (result) {
            layer.close(loading);
          //  console.log(suffix.toLowerCase())
            var video_path = '';
            if (result.res.requestUrls[0].indexOf("?") > 0){
                video_path = result.res.requestUrls[0].substr(0, result.res.requestUrls[0].indexOf("?"));
            } else {
                video_path = result.res.requestUrls[0];
            }
            $('#video_p').remove();
            $('#video_path').val(video_path);
            let html = `<video id="video_p" style="margin: 0 0 0 50px;" width="300" height="200" controls  autoplay="autoplay"><source src="`+video_path+`" type="video/mp4"></video>`;
            $('#video_div').after(html);
            getVideoTime()

        }).catch(function (err) {
            console.log(err);
        });
    }
    
    //  获取视频时长
    function getVideoTime() {
        var obj_file = document.getElementById("uploadVideo");
        var content = obj_file.files[0]
        //获取录音时长
        var url = URL.createObjectURL(content);
        //经测试，发现audio也可获取视频的时长
        var audioElement = new Audio(url);
        var duration;
        audioElement.addEventListener("loadedmetadata", function (_event) {
            duration = audioElement.duration / 60;
            $('#chapter_time').val(Math.ceil(duration));
        });
    }


    /**
     * 生成文件名
     * @returns
     */
    function timestamp() {
        var time = new Date();
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return "" + y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s);
    }

    function add0(m) {
        return m < 10 ? '0' + m : m;
    }

    function randomString() {
        let len = 12;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678';
        /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    
</script>
</body>
</html>